<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :scrollTop="scrollTop" backgroundColor="#fff" color="#222222" :title="pageTitle" :fontWeight="600">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack">
				</view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="rz-header">
				<view class="name">碰头人入驻</view>
			</view>
			<view class="rz-content">
				<image class="rz-icon" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/rz.png" mode="heightFix"></image>
				<!-- <view class="hite">平台存在技术服务费，详情请查看下方入驻协议</view> -->
				<view class="step">
					<view class="step-c"></view>
					<view class="dotted"></view>
					<view class="step-1"></view>
					<view class="dotted"></view>
					<view class="step-3"></view>
				</view>
				<view class="server-list">
					<view v-for="(item, index) in serviceList" :key="item.id" class="server-item">
						<view class="header">
							<view class="title">{{ item.title }}</view>
							<view v-if="serviceAddress.length > 0 && index == 1" class="modification dy-iconfont icon-a-bianjibeifen2"
								@tap.stop.prevent="onAddress()">
							</view>
						</view>
						<view class="server-component" v-if="serviceCategory.length > 0 && index == 0">
							<view class="server-component-item" v-for="(seitem, seindex) in serviceCategory" :key="seitem.id">
								<view class="name">{{ seitem.categoryName }}</view>
								<view class="pirce-view">
									<view class="pirce">
										{{ seitem.category_list[0].disabled ? seitem.category_list[0].value : seitem.category_list[1].value }}元/{{ seitem.category_list[0].disabled ? '小时' : '次' }}
									</view>
									<view class="dy-iconfont icon-a-bianjibeifen2" @tap.stop.prevent="onAmend(seitem, seindex)">
									</view>
								</view>
							</view>
						</view>
						<view class="address-list" v-if="serviceAddress.length > 0 && index == 1">
							<view class="address-item" v-for="(aditem, adindex) in serviceAddress" :key="aditem.addressId">
								{{ serviceList[1].list[selectProvinceIndex].childList[selectCityIndex].name }}·{{ aditem.name }}
							</view>
						</view>
						<view class="add" v-if="(index == 1 && serviceAddress.length <= 0) || index == 0" @tap="addServer(item)">+添加
						</view>
					</view>
				</view>
			</view>
			<button class="btn-primary exit-submit" @tap.stop.prevent="onExit">下一步</button>
		</view>
		<uv-toast ref="toast"></uv-toast>
		<uv-popup ref="popup" mode="bottom" :safeAreaInsetBottom="false" round="20" @change="popupChange">
			<view class="server-pop" v-if="serverPop == 'category'">
				<view class="header">
					<view class="title">添加服务</view>
					<view class="close" @tap="closePop"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="component-content">
						<view class="component-header">
							<view class="title">选择服务</view>
							<view class="introduce" @tap="openJS('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/20231226-141558.png')">
								<text class="dy-iconfont icon-a-17beifen"></text> 类目介绍
							</view>
						</view>
						<view class="server-box">
							<tabs class="server-item-tab" from="server-item" keyName="categoryName" :list="serviceList[0].list" :current="fatherIndex"
								itemStyle="auto" @change="clickServiceTab" :customStyle="{ backgroundColor: '#F6F8F7' }">
							</tabs>
							<view class="category-list" v-if="serviceList[0].list.length > 0">
								<view class="category-item" :class="{ 'active': item.disabled }"
									v-for="(item, index) in serviceList[0].list[fatherIndex].childList" :key="item.id"
									@tap.stop.prevent="selectServer(item, index)">
									{{ item.categoryName }}
								</view>
							</view>
						</view>
						<view class="component-header">
							<view class="title">填写报价</view>
							<view class="introduce" @tap="openJS('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/20231226-141558.png')">
								<text class="dy-iconfont icon-a-17beifen"></text> 类目报价区间
							</view>
						</view>
						<view class="component-box" v-if="serviceList[0].list.length > 0">
							<view class="pirce-introduce">
								若您选择按{{ serverTypeList[0].disabled ? "小时" : "次" }}收费，可以在个人简介内说明相关标准
							</view>
							<view class="skill-list">
								<!-- 收费说明 -->
								<view class="goods-spec" v-for="(item, index) in serverTypeList" :key="item.id" @tap.stop.prevent="selectSkill(item, index)">
									<view class="radio" :class="{ 'radio-active': item.disabled }"></view>
									<view class="content-key">{{ item.categoryName }}</view>
								</view>
							</view>
							<view class="pricing" v-if="serviceList[0]">
								<view class="the-hour" v-if="serverTypeList[0].disabled">
									<view class="pirce" :class="{ 'beyond': beyond1 }">
										<text class="text">每小时</text>
										<input class="pirce-input" @input="pirceInput($event, 'value0')" type="number"
											:value="serviceList[0].list[fatherIndex].childList[childIndex].category_list[0].value" placeholder="请填写"
											:always-embed="true" placeholder-style="color: #999B9B;" />
										<text class="text">元</text>
									</view>
									<view class="hour" :class="{ 'beyond': beyond2 }">
										<input class="hour-input" @input="pirceInput($event, 'hour0')" type="number"
											:value="serviceList[0].list[fatherIndex].childList[childIndex].category_list[0].hour" placeholder="请填写"
											:always-embed="true" />
										<text class="text">小时起拍</text>
									</view>
								</view>
								<view class="the-hour" v-else>
									<view class="pirce" :class="{ 'beyond': beyond3 }">
										<text class="text">每次</text>
										<input class="pirce-input" @input="pirceInput($event, 'value1')" type="number"
											:value="serviceList[0].list[fatherIndex].childList[childIndex].category_list[1].value" placeholder="请填写"
											placeholder-style="color: #999B9B;" :always-embed="true" />
										<text class="text">元</text>
									</view>
								</view>
							</view>
							<view class="certification" v-if="serviceList[0].list[fatherIndex].childList[childIndex].isCertificate == 1">
								<view class="certification-title">*该服务需要完善资质，请上传资质证书
									<text class="certificateName">（{{serviceList[0].list[fatherIndex].childList[childIndex].certificateName}}）</text>
								</view>
								<view class="certification-introduce">
									若您选择按{{ serverTypeList[0].disabled ? "小时" : "次" }}收费，可以在个人简介内说明相关标准</view>
								<uv-upload :fileList="fileList1" name="1" multiple :maxCount="9" accept="image" @afterRead="afterReadm" @delete="deletePic"
									@error="uploadErrorm" ref="uploadm">
									<view class="add-image" @tap="onUpdateAvatar" v-if="fileList1.length < 9">
										<uv-icon name="plus" color="#D8D8D8" size="34"></uv-icon>
										<text class="add-text">上传资质证书</text>
									</view>
								</uv-upload>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="affirm">
					<button v-if="affirmType == 'affirm'" class="btn-primary btn-affirm" @tap.stop.prevent="onAffirm">确认</button>
					<view class="btn-box" v-else>
						<button class="btn-primary btn-delete" @tap.stop.prevent="onDelete">删除</button>
						<button class="btn-primary modification" @tap.stop.prevent="modification">确认</button>
					</view>
				</view>
			</view>


			<view class="server-pop server-pop-addss" v-if="serverPop == 'address'">
				<view class="header">
					<view class="title">添加服务地址</view>
					<view class="close" @tap="closePop"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<address-multiple ref="multiple" :cityList="serviceList[1].list" customStyle="height: 1090rpx" multiple="1" :provinceIndex="selectProvinceIndex"
					:cityIndex="selectCityIndex" @onAffirmCity="onAffirmCity" :scrollView="scrollView"></address-multiple>
			</view>
		</uv-popup>
		<survey-pop></survey-pop>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import tabs from '@/uni_modules/uv-tabs/components/uv-tabs/uv-tabs-index.vue';
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {
			tabs
		},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				skeletonShow: true, //加载
				beyond1: false,
				beyond2: false,
				beyond3: false,
				pageTitle: '碰头人入驻', //标题
				imgLoding: false,
				serverPop: '',
				fileList1: [],
				serviceCategory: [],
				serviceAddress: [],
				category_child: null,
				// operation: 0,
				fatherIndex: 0,
				childIndex: 0,
				affirmType: 'affirm',
				value0: '',
				hour0: '',
				value1: '',
				serverTypeList: [{
					categoryName: '按小时收费',
					disabled: true,
					id: 0,
					hour: null,
					value: null,
				}, {
					categoryName: '按次收费',
					disabled: false,
					id: 1,
					hour: 1,
					value: null,
				}],
				serviceList: [{
					title: '我的服务及报价',
					value: null,
					list: [],
					content: null,
					id: 'category'
				}, {
					title: '我的服务地区',
					value: null,
					list: [],
					content: null,
					id: 'address'
				}],
				modificationIndex: null,
				selectCityIndex: 0,
				selectProvinceIndex: 0,
				scrollView: 'city0'
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			this.getServerDetails()
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			//获取用户详情
			getServerDetails() {
				return new Promise((resolve, reject) => {
					app._get(
						"/client/peng-register/able-change", null,
						(res) => {
							let result = res.data
							this.serviceList[0].list = result.categoryList
							if (this.serviceList[0].list.length > 0) {
								this.serviceList[0].list[0].childList.forEach((item, index) => {
									this.$set(item, 'disabled', index == 0)
									this.$set(item, 'category_list', [{
										categoryName: '按小时收费',
										disabled: true,
										id: 0,
										hour: '',
										value: '',
									}, {
										categoryName: '按次收费',
										disabled: false,
										id: 1,
										hour: 1,
										value: '',
									}])
								})
							}
							// result.addressList.forEach((item, index) => {
							// 	this.serviceList[1].list = [...item.childList, ...this.serviceList[1].list]
							// })
							this.serviceList[1].list = result.addressList
							let step2 = uni.getStorageSync('step2');
							if (step2) {
								this.serviceCategory = step2.serviceCategory
								this.serviceAddress = step2.serviceAddress
								this.fileList1 = step2.fileList1 || []
								this.selectProvinceIndex = step2.selectProvinceIndex
								this.selectCityIndex = step2.selectCityIndex
								let status = null
								let cityStatus = null
								this.treeIterator(step2.list, (node) => {
									node.checkStatus = 0
									this.serviceAddress.forEach(im => {
										if (node.code == im.parentCode) {
											node.checkStatus = 1
										}
										if (node.addressId == im.addressId) {
											node.checkStatus = 2
										}
										if (node.checkStatus == 1) {
											status = node.parentCode
											cityStatus = node.code
										}
									})
								})
								this.treeIterator(step2.list, (node) => {
									if (node.code == status) {
										node.checkStatus = 1
									}
									if (node.code == cityStatus) {
										node.num = this.serviceAddress.length
									}

								})
								this.scrollView = 'city' + this.selectProvinceIndex
								this.serviceList[1].list = step2.list
								// step2.list[this.selectProvinceIndex].childList[this.selectCityIndex].childList.forEach((item, index) => {
								// 	this.$set(this.serviceList[1].list[this.selectProvinceIndex].childList[this.selectCityIndex].childList[index], 'checkStatus', 0)
								// 	this.serviceAddress.forEach(im => {
								// 		if (item.addressId == im.addressId) {
								// 			this.$set(this.serviceList[1].list[this.selectProvinceIndex].childList[this.selectCityIndex].childList[index], 'checkStatus', 2)
								// 		}
								// 	})
								// })
							}
						}, null, () => {
							resolve();
						}
					);
				});
			},
			treeIterator(tree, func) {
				tree.forEach((node) => {
					func(node)
					node.childList && this.treeIterator(node.childList, func)
				})
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
			clickServiceTab(e) {
				// console.log(e);
				this.beyond1 = false
				this.beyond2 = false
				this.beyond3 = false
				this.childIndex = 0
				this.fatherIndex = e.index
				this.serviceList[0].list[this.fatherIndex].childList.forEach((item, index) => {
					this.$set(item, 'disabled', index == 0)
					if (item.category_list) {
						this.$set(item, 'category_list', item.category_list)
					} else {
						this.$set(item, 'category_list', [{
							categoryName: '按小时收费',
							disabled: true,
							id: 0,
							hour: '',
							value: '',
						}, {
							categoryName: '按次收费',
							disabled: false,
							id: 1,
							hour: 1,
							value: '',
						}])
					}
				})
			},
			selectServer(it, li) {
				this.beyond1 = false
				this.beyond2 = false
				this.beyond3 = false
				this.childIndex = li
				this.serviceList[0].list[this.fatherIndex].childList.forEach((item, index) => {
					this.$set(this.serviceList[0].list[this.fatherIndex].childList[index], 'disabled', index == li)
				})
			},
			addServer(item) {
				this.affirmType = 'affirm'
				this.serverPop = item.id
				this.$refs.popup.open();
			},
			selectSkill(kill, li) {
				if (!kill.disabled) {
					this.serverTypeList.forEach((item, index) => {
						this.$set(item, 'disabled', index == li)
					})
					// this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list.forEach((item,
					// 	index) => {
					// 	this.$set(item, 'disabled', index == li)
					// })
				}
			},
			formatNum(params) {
				const reg = /^(0|(?!0)\d+)$/;
				if (!reg.test(params)) {
					let value = params.replace(/\D+/, "");
					if (value) {
						let f = false;
						let arr = [];
						value = value.split("").forEach((char) => {
							if (char != 0) {
								f = true;
							}
							if (f) {
								arr.push(char);
							}
						});
						value = arr.length ? arr.join("") : "0";
					}
					return value ? value : ""
				}
				return params
			},
			pirceInput(event, value) {
				this.$nextTick(() => {
					let val = event.target.value.toString();
					val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
					val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
					val = val.replace(/^0+\./g, '0.');
					val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val
					val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
					val = this.formatNum(val)
					if (value == 'value0') {
						this.value0 = val
						this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0].value = val
					} else if (value == 'value1') {
						this.value1 = val
						this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[1].value = val
					} else {
						this.hour0 = val
						this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0].hour = val
					}
				});
			},
			// 市
			selectDistrict(item, index) {
				if (this.cityIndex != index) {
					this.serviceList[1].list[this.cityIndex].childList.forEach((item, index) => {
						this.$set(item, 'child_pitch_on', 0)
					})
					this.cityIndex = index
				}
			},
			// 区
			selectArea(item, index) {
				this.$set(this.serviceList[1].list[this.cityIndex].childList[index], 'child_pitch_on', item
					.child_pitch_on == 1 ?
					0 : 1)
			},
			//修改类目
			onAmend(item, index) {
				this.modificationIndex = index
				this.affirmType = 'modification'
				this.serverPop = 'category'
				this.fatherIndex = item.fatherIndex
				this.serviceList[0].list[this.fatherIndex].childList.forEach((it, index) => {
					this.$set(it, 'disabled', item.id == it.id)
					if (item.id == it.id) {
						this.childIndex = index
						this.$set(it, 'category_list', item.category_list)
					}
				})
				this.$refs.popup.open();
			},
			//修改地区
			onAddress() {
				this.serverPop = 'address'
				this.$refs.popup.open();
			},
			onUpdateAvatar() {
				this.$nextTick(() => {
					this.$refs.uploadm.chooseFile();
				})
			},
			async afterReadm(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, lists[i].type, 1)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: result ? 'success' : 'failed',
						message: result ? '' : '上传失败',
						url: !result ? '' : result.coverPictureUrl ? result.coverPictureUrl : result.url,
						path: result ? result.path : '',
						type: result ? result.fileType : '',
						fileType: result ? result.fileType : '',
						fileUrl: result ? result.url : '',
					}))
					fileListLen++
				}
				console.log(this[`fileList${event.name}`]);
			},
			uploadFilePromise(url, type, loading) {
				if (loading != 1) {
					this.$refs.toast.show({
						type: 'loading',
					})
				}
				return new Promise((resolve, reject) => {
					let header = {}
					if (app.globalData.token) {
						header = {
							token: 'Bearer ' + app.globalData.token,
						}
					}
					let a = uni.uploadFile({
						url: app.globalData.api_root + '/client/file/anyone/upload',
						filePath: url,
						name: 'file',
						formData: {
							storageType: 'TENCENT_COS',
							bucket: 'pengtou-1322587508',
							bizType: type == 'video' ? 'video-frame' : 'send'
						},
						header: header || {},
						success: (res) => {
							setTimeout(() => {
								this.$refs.toast.hide()
								let result = typeof res.data === "object" ? res.data : JSON
									.parse(res.data);
								if (0 == result.code || 200 == result.code) {
									setTimeout(() => {
										resolve(result.data)
									}, 200)
								} else {
									setTimeout(() => {
										resolve(false);
									}, 200)
								}
							}, 1000)
						},
						fail: (err) => {
							console.log('err', err);
							setTimeout(() => {
								resolve(false);
								this.$refs.toast.hide()
							}, 1000)
						},
					});
				})
			},
			uploadError(e) {

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			onAffirm() {


				this.category_child = this.serviceList[0].list[this.fatherIndex].childList[this.childIndex]
				console.log(this.category_child);
				console.log(this.hour0);
				let pengMaxPrice = Math.floor(this.category_child.pengMaxPrice * 100) / 100
				let pengMinPrice = Math.floor(this.category_child.pengMinPrice * 100) / 100

				let frequencyMaxPrice = Math.floor(this.category_child.frequencyMaxPrice * 100) / 100
				let frequencyMinPrice = Math.floor(this.category_child.frequencyMinPrice * 100) / 100
				let category = null
				this.serverTypeList.forEach((item, index) => {
					if (item.disabled) {
						category = index
					}
				})
				let service = this.serviceCategory.filter((item) => {
					return item.id == this.category_child.id;
				});
				// console.log(this.serviceCategory, this.category_child);




				if (service.length > 0) {
					this.$refs.toast.show({
						type: 'default',
						message: "请勿重复添加类目"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (category == 0) {
					if (!this.value0) {
						this.$refs.toast.show({
							type: 'default',
							message: "请填写服务报价"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else if (!this.hour0) {
						this.$refs.toast.show({
							type: 'default',
							message: "请填写起拍小时数"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else if (this.hour0 < (this.category_child.pengLeastTime * 1)) {
						this.$refs.toast.show({
							type: 'default',
							message: "时间小于类目最小时长"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else if (this.hour0 > 12) {
						this.$refs.toast.show({
							type: 'default',
							message: "最高不可超过12小时"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else {
						if (this.value0 > pengMaxPrice) {
							this.beyond1 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价超出该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else if (this.value0 < pengMinPrice) {
							this.beyond1 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价小于该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else {
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0]
								.disabled = true
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[1]
								.disabled = false
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0].value =
								this.value0
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0].hour =
								this.hour0
						}

					}
				} else if (category == 1) {
					if (!this.value1) {
						this.$refs.toast.show({
							type: 'default',
							message: "请填写服务报价"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else {
						if (this.value1 > frequencyMaxPrice) {
							this.beyond3 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价超出该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else if (this.value1 < frequencyMinPrice) {
							this.beyond3 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价小于该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else {
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[1]
								.disabled = true
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0]
								.disabled = false
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[1].value =
								this.value1
						}
					}
				}



				console.log("1", this.fileList1);
				if (this.category_child.isCertificate == 1 && this.fileList1.length <= 0) {
					this.$refs.toast.show({
						type: 'default',
						message: "请上传资质证书"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				} else if (this.category_child.isCertificate == 1 && this.fileList1.length > 0) {
					this.$set(this.serviceList[0].list[this.fatherIndex].childList[this.childIndex], 'certificate', this
						.fileList1)
				}

				this.$set(this.category_child, 'fatherIndex', this.fatherIndex)
				this.serviceCategory.push(this.category_child)
				// this.$set(this.serviceCategory, 0, this.category_child)
				this.closePop()
			},
			openJS(image) {
				uni.previewImage({
					urls: [image]
				})
			},
			modification() {
				this.category_child = this.serviceList[0].list[this.fatherIndex].childList[this.childIndex]
				let pengMaxPrice = Math.floor(this.category_child.pengMaxPrice * 100) / 100
				let pengMinPrice = Math.floor(this.category_child.pengMinPrice * 100) / 100

				let frequencyMaxPrice = Math.floor(this.category_child.frequencyMaxPrice * 100) / 100
				let frequencyMinPrice = Math.floor(this.category_child.frequencyMinPrice * 100) / 100

				let category = null
				this.serverTypeList.forEach((item, index) => {
					if (item.disabled) {
						category = index
					}
				})
				let service = true
				this.serviceCategory.forEach((item, index) => {
					if (this.modificationIndex != index) {
						service = item.id != this.category_child.id
					}
				})
				if (!service) {
					this.$refs.toast.show({
						type: 'default',
						message: "请勿重复添加类目"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (category == 0) {
					if (!this.value0) {
						this.$refs.toast.show({
							type: 'default',
							message: "请填写服务报价"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else if (!this.hour0) {
						this.$refs.toast.show({
							type: 'default',
							message: "请填写起拍小时数"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else {
						if (this.value0 > pengMaxPrice) {
							this.beyond1 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价超出该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else if (this.value0 < pengMinPrice) {
							this.beyond1 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价小于该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else {
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0]
								.disabled = true
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0].value =
								this.value0
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0].hour =
								this.hour0
						}
					}
				} else if (category == 1) {
					if (!this.value1) {
						this.$refs.toast.show({
							type: 'default',
							message: "请填写服务报价"
						})
						setTimeout(() => {
							this.$refs.toast.hide()
						}, 1000)
						return
					} else {
						if (this.value1 > frequencyMaxPrice) {
							this.beyond3 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价超出该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else if (this.value1 < frequencyMinPrice) {
							this.beyond3 = true
							this.$refs.toast.show({
								type: 'default',
								message: "报价小于该类目报价区间"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
							return
						} else {
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[1]
								.disabled = true
							this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[1].value =
								this.value1
						}
					}
				}
				console.log("2", this.fileList1);
				if (this.category_child.isCertificate == 1 && this.fileList1.length <= 0) {
					this.$refs.toast.show({
						type: 'default',
						message: "请上传资质证书"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				} else if (this.category_child.isCertificate == 1 && this.fileList1.length > 0) {
					this.$set(this.serviceList[0].list[this.fatherIndex].childList[this.childIndex], 'certificate', this
						.fileList1)
				}

				this.$set(this.category_child, 'fatherIndex', this.fatherIndex)

				this.$set(this.serviceCategory, this.modificationIndex, this.category_child)
				// this.serviceCategory.push(this.category_child)
				this.closePop()
			},
			onDelete() {
				this.serviceCategory.splice(this.modificationIndex, 1)
				this.closePop()
			},
			popupChange(e) {
				if (this.serverPop == 'address' && !e.show) {
					this.$refs.multiple.affirmCity(1)
				}
			},
			onAffirmCity(value) {
				console.log('onAffirmCity',value);
				this.serviceAddress = []
				this.serviceAddress = value.regionNameArr
				this.selectProvinceIndex = value.selectProvinceIndex
				this.selectCityIndex = value.selectCityIndex
				let v = value.value
				if (v == 0) {
					this.closePop()
				}
			},
			closePop() {
				this.beyond1 = false
				this.beyond2 = false
				this.beyond3 = false
				this.$refs.popup.close();
			},

			onExit() {
				if (this.serviceCategory.length <= 0) {
					this.$refs.toast.show({
						type: 'default',
						message: "请添加服务及报价"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (this.serviceAddress.length <= 0) {
					this.$refs.toast.show({
						type: 'default',
						message: "请添加您的服务地区"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				// this.serviceCategory.forEach(()=>{

				// });
				// if (seitem.category_list[0].disabled) {
				// 	if (this.serviceList[0].list[this.fatherIndex].childList[this.childIndex].category_list[0].hour < this
				// 		.selectServerItem.pengLeastTime) {
				// 		this.$refs.toast.show({
				// 			type: 'default',
				// 			message: "当前类目最低服务时长" + (this
				// 		.selectServerItem.pengLeastTime*1)+"小时"
				// 		})
				// 		setTimeout(() => {
				// 			this.$refs.toast.hide()
				// 		}, 1000)
				// 		return
				// 	}
				// }





				let pengAreaList = []
				let pengCategoryList = []
				this.serviceAddress.forEach(item => {
					pengAreaList.push({
						countyId: item.addressId
					})
				})
				let categoryAuthList = []
				this.fileList1.forEach(item => {
					categoryAuthList.push({
						fileUrl: item.path
					})
				})
				this.serviceCategory.forEach(item => {
					pengCategoryList.push({
						categoryAuthList: item.isCertificate == 1 ? categoryAuthList : null,
						categoryId: item.id,
						pengActualPrice: item.category_list[0].disabled ? item.category_list[0].value : item.category_list[1].value,
						pengLeastTime: item.category_list[0].disabled ? item.category_list[0].hour : null,
						serviceType: item.category_list[0].disabled ? 0 : 1
					})
				})
				let register_save = uni.getStorageSync('register_save');
				register_save = Object.assign(register_save, {
					serviceCategory: this.serviceCategory,
					serviceAddress: this.serviceAddress,
					pengAreaList: pengAreaList,
					pengCategoryList: pengCategoryList
				});
				let step2 = {
					serviceCategory: this.serviceCategory,
					serviceAddress: this.serviceAddress,
					pengAreaList: pengAreaList,
					pengCategoryList: pengCategoryList,
					fileList1: this.fileList1,
					selectProvinceIndex: this.selectProvinceIndex,
					selectCityIndex: this.selectCityIndex,
					list: this.serviceList[1].list
				}
				uni.setStorageSync('register_save', register_save);
				uni.setStorageSync('step2', step2);
				uni.navigateTo({
					url: '/page_account/autonym/basic',
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #FFFFFF;
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/server-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 640rpx;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 220rpx 0 160rpx;
			min-height: 100vh;
			position: relative;

			.rz-header {
				box-sizing: border-box;
				padding: 0 280rpx 0 52rpx;

				.name {
					font-size: 48rpx;
					font-weight: 900;
					color: #1E1F1F;
					line-height: 44rpx;
					margin-bottom: 32rpx;
				}

				.title {
					font-size: 22rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 30rpx;
					margin-bottom: 22rpx;
				}
			}

			.rz-content {
				box-sizing: border-box;
				padding: 38rpx 36rpx 24rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				position: relative;

				.rz-icon {
					height: 158rpx;
					position: absolute;
					right: 88rpx;
					top: -126rpx;
				}

				.hite {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF4664;
					line-height: 33rpx;
					box-sizing: border-box;
					padding: 10rpx 0rpx 10rpx 17rpx;
					background: rgba(255, 70, 100, 0.1);
					border-radius: 12rpx;
					margin-bottom: 41rpx;

					&::before {
						font-family: "dy-iconfont";
						content: "\e62b";
						font-size: 28rpx;
						padding-right: 7rpx;
						box-sizing: border-box;
					}
				}

				.step {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 103rpx;

					.step-1 {
						width: 14rpx;
						height: 14rpx;
						background: #0E0E0D;
						border-radius: 50%;
						border: 8rpx solid #CFCFCF;
						position: relative;

						&::before {
							position: absolute;
							left: 50%;
							bottom: -30rpx;
							transform: translate(-50%, 100%);
							min-width: 150rpx;
							content: "填写入驻信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}

					.step-c {
						width: 30rpx;
						height: 30rpx;
						background: #0E0E0D;
						backdrop-filter: blur(10rpx);
						border-radius: 50%;
						position: relative;

						&::after {
							font-family: "dy-iconfont";
							content: "\e61c";
							color: #A7F517;
							font-size: 20rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}

						&::before {
							position: absolute;
							left: 50%;
							bottom: -22rpx;
							transform: translate(-50%, 100%);
							min-width: 150rpx;
							content: "上传实名信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}

					.dotted {
						width: 222rpx;
						height: 1rpx;
						border-bottom: 1px dashed #8F8F8F;
						box-sizing: border-box;
					}

					.step-2 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;

						&::before {
							position: absolute;
							left: 50%;
							bottom: -63rpx;
							transform: translateX(-50%);
							min-width: 150rpx;
							content: "填写入驻信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}

					.step-3 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;

						&::before {
							position: absolute;
							left: 50%;
							bottom: -27rpx;
							transform: translate(-50%, 100%);
							min-width: 150rpx;
							content: "填写基础信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}
				}
			}

			.server-list {
				.server-item {
					margin-top: 48rpx;

					.header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 32rpx;

						.title {
							font-size: 30rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 40rpx;
						}

						.modification {
							font-size: 28rpx;
							color: #BBBCBB;
						}
					}

					.server-component {
						background: #FFFFFF;
						border-radius: 12rpx;
						box-sizing: border-box;
						padding: 28rpx;
						margin-bottom: 20rpx;

						.server-component-item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 37rpx;

							&:last-child {
								margin-bottom: 0;
							}

							.name {
								box-sizing: border-box;
								padding: 12rpx;
								background: #EFF9E6;
								border-radius: 8rpx;
								font-size: 20rpx;
								font-weight: 400;
								color: #6D9E15;
								line-height: 28rpx;
							}

							.pirce-view {
								display: flex;
								align-items: center;

								.pirce {
									font-size: 28rpx;
									font-weight: 900;
									color: #282D2D;
									line-height: 37rpx;
									margin-right: 16rpx;
								}

								.dy-iconfont {
									color: #BBBCBB;
								}
							}
						}
					}

					.address-list {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.address-item {
							min-width: calc((100% - 50rpx) / 3);
							// margin: 0 8rpx 13rpx;
							box-sizing: border-box;
							padding: 17rpx 14rpx;
							background: #FFFFFF;
							border-radius: 20rpx;
							border: 4rpx solid #E3E9E5;
							margin-bottom: 13rpx;
							white-space: nowrap;
							text-align: center;
							margin-right: 16rpx;
							font-size: 28rpx;
							color: #282D2D;
							font-weight: 400;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}
					}

					.add {
						height: 88rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						border: 1px dashed #0E0E0D;
						font-size: 28rpx;
						font-weight: 900;
						color: #1E1F1F;
						line-height: 88rpx;
						text-align: center;
					}
				}
			}

			.exit-submit {
				position: absolute;
				width: calc(100% - 36rpx * 2);
				bottom: 56rpx;
				left: 50%;
				// height: 102rpx;
				// line-height: 102rpx;
				transform: translateX(-50%);
			}
		}

		.server-pop {
			box-sizing: border-box;
			padding: 48rpx 48rpx 0;
			padding-bottom: calc(144rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(144rpx + env(safe-area-inset-bottom));

			&.server-pop-addss {
				padding: 48rpx 0 0;

				.header {
					padding: 0 48rpx 36rpx;
				}
			}

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 0 36rpx 0;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.scroll-Y {
				height: 1090rpx;

				.component-content {
					box-sizing: border-box;
					padding-bottom: 20rpx;

					.component-header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						padding-right: 20rpx;
						margin-bottom: 20rpx;

						.title {
							font-size: 28rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 37rpx;


							&::after {
								content: "";
								display: block;
								width: 104rpx;
								height: 19rpx;
								background: linear-gradient(270deg, rgba(229, 255, 139, 0) 0%, #A0F00D 100%);
								margin-top: -19rpx;
							}
						}

						.introduce {
							font-size: 22rpx;
							font-weight: 400;
							color: #396DE8;
							line-height: 30rpx;

							.dy-iconfont {
								font-size: 26rpx;
								margin-right: 8rpx;
							}
						}
					}

					.server-box {
						min-height: 380rpx;
						background: #FFFFFF;
						width: calc(100% - 10rpx);
						margin: 0 auto;
						// box-shadow: 0rpx 2rpx 21rpx 0px rgba(232, 235, 224, 0.5);
						box-shadow: rgba(232, 235, 224, 0.5) 0px 0px 21rpx;
						border-radius: 20rpx;
						margin-bottom: 48rpx;



						.server-item-tab {
							background: #F6F8F7;
							border-radius: 20rpx 20rpx 0 0;
						}

						.category-list {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							box-sizing: border-box;
							padding: 32rpx 0;

							.category-item {
								box-sizing: border-box;
								min-width: calc((100% - 40rpx) / 2);
								padding: 16rpx 32rpx;
								background: #FFFFFF;
								border-radius: 20rpx;
								border: 4rpx solid #E3E9E5;
								white-space: nowrap;
								text-align: center;
								margin: 0 10rpx 12rpx;
								font-size: 26rpx;
								color: #282D2D;
								font-weight: 400;

								&.active {
									border: 4rpx solid #282D2D;
									position: relative;
									font-weight: 900;
									// box-sizing: border-box;

									&::before {
										content: "";
										display: block;
										width: 36rpx;
										height: 28rpx;
										background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/city-active.png');
										background-size: 100%;
										position: absolute;
										right: 0;
										bottom: 0;
									}
								}
							}
						}
					}

					.component-box {
						.pirce-introduce {
							font-size: 22rpx;
							font-weight: 400;
							color: #999B9B;
							line-height: 30rpx;
						}

						.skill-list {
							display: flex;
							margin: 20rpx 0;

							.goods-spec {
								display: flex;
								align-items: center;
								justify-content: space-between;
								// margin-bottom: 36rpx;
								margin-right: 78rpx;

								.radio {
									width: 24rpx;
									height: 24rpx;
									background: #FFFFFF;
									border: 2rpx solid #464941;
									border-radius: 50%;
									margin-right: 8rpx;

									&.radio-active {
										position: relative;

										&::after {
											content: "";
											display: inline-block;
											width: 14rpx;
											height: 14rpx;
											background: #0E0E0D;
											border-radius: 50%;
											position: absolute;
											left: 50%;
											top: 50%;
											transform: translate(-50%, -50%);
										}
									}
								}

								.content-key {
									font-size: 28rpx;
									font-weight: 400;
									color: #282D2D;
									line-height: 37px;
									flex: 1;
								}
							}
						}

						.pricing {
							.ts {
								font-size: 22rpx;
								font-weight: 400;
								color: #FF4664;
								line-height: 30rpx;
							}

							.the-hour {
								display: flex;
								justify-content: space-between;
								align-items: center;


								.pirce,
								.hour {
									width: 320rpx;
									height: 58rpx;
									box-sizing: border-box;
									padding: 0 24rpx;
									background: #F6F8F7;
									border-radius: 8rpx;
									display: flex;
									align-items: center;

									.text {
										font-size: 28rpx;
										font-weight: 400;
										color: #282D2D;
										line-height: 37rpx;
										flex-shrink: 0;
									}

									.pirce-input,
									.hour-input {
										font-size: 28rpx;
										font-weight: 400;
										color: #282D2D;
										line-height: 37rpx;
										box-sizing: border-box;
										padding: 0 12rpx;
										text-align: right;
									}

									&.beyond {
										background: rgba(255, 70, 100, 0.05);
									}
								}

								.hour {

									.hour-input {
										text-align: center;
									}
								}
							}
						}

						.certification {
							margin-top: 48rpx;

							.certification-title {
								font-size: 28rpx;
								font-weight: 900;
								color: #282D2D;
								line-height: 37rpx;

								.certificateName {
									font-size: 24rpx;
								}
							}

							.certification-introduce {
								margin-top: 12rpx;
								margin-bottom: 24rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: #999B9B;
								line-height: 30rpx;
							}

							.add-image-list {
								display: flex;
								flex-wrap: wrap;
							}

							.add-image {
								width: 190rpx;
								height: 190rpx;
								background: #F6F8F7;
								border-radius: 16rpx;
								border: 2rpx dashed #C4CFCA;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;

								.add-text {
									font-size: 22rpx;
									font-weight: 400;
									color: #999B9B;
									line-height: 30rpx;
									margin-top: 17rpx;
								}
							}

							.picture-item {
								position: relative;

								.del-btn {
									position: absolute;
									display: flex;
									top: -10rpx;
									right: -10rpx;
									z-index: 2;
								}
							}

							.picture-item-image {
								width: 190rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;

								.picture-image {
									width: 100%;
									height: 100%;
									border-radius: 10px;
								}
							}
						}
					}

					.city-list {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						// box-sizing: border-box;
						// padding: 32rpx 20rpx;
						margin-bottom: 24rpx;

						.city-item {
							box-sizing: border-box;
							padding: 16rpx 0;
							width: calc((100% - 80rpx) / 4);
							background: #FFFFFF;
							border-radius: 20rpx;
							border: 4rpx solid #E3E9E5;
							margin-bottom: 24rpx;
							white-space: nowrap;
							text-align: center;
							margin-right: 20rpx;
							font-size: 28rpx;
							color: #282D2D;
							font-weight: 400;

							&.active-city {
								border: 4rpx solid #282D2D;
								position: relative;
								font-weight: 900;

								&::before {
									content: "";
									display: block;
									width: 36rpx;
									height: 28rpx;
									background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/city-active.png');
									background-size: 100%;
									position: absolute;
									right: 0;
									bottom: 0;
								}
							}

							&.active {
								border: 4rpx solid #282D2D;
								position: relative;
								font-weight: 900;

								&::before {
									content: "";
									display: block;
									width: 36rpx;
									height: 28rpx;
									background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/city-active.png');
									background-size: 100%;
									position: absolute;
									right: 0;
									bottom: 0;
								}
							}
						}
					}
				}
			}


			.affirm {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0px 0 19rpx 0px rgba(198, 204, 202, 0.56);
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);

				.btn-affirm {
					position: absolute;
					width: calc(100% - 36rpx * 2);
					// height: 102rpx;
					// line-height: 102rpx;
					top: 12rpx;
					left: 50%;
					transform: translateX(-50%);
					background-color: #0E0E0D;
				}

				.btn-box {
					display: flex;
					box-sizing: border-box;
					padding: 12rpx 31rpx 0;
					align-items: center;
					justify-content: space-between;

					.btn-delete {
						// height: 102rpx;
						width: calc((100% - 24rpx) / 2);
						background: #FFFFFF;
						border: 2rpx solid #FF4664;
						font-size: 32rpx;
						font-weight: 900;
						// line-height: 102rpx;
						color: #FF4664;
					}

					.modification {
						// height: 102rpx;
						width: calc((100% - 24rpx) / 2);
						// line-height: 102rpx;

					}
				}
			}
		}
	}
</style>